<template>
    <div class="user-box" v-loading="loading">
        <div>
            <topTitle title="用户信息" style="padding-left:30px;"/>
            <!-- 上方用户信息 -->
            <div class="user-top">
                <div class="user-area">
                    <div class="user_img">
                        <img :src="userVo.userImage" alt="">
                    </div>
                    <div class="user-name">
                        <div>{{userVo.nickName || '-'}}</div>
                        <div>
                            <span>{{userVo.userId}}</span>
                            <span style="margin-left: 5px;" class="table-btn" @click="copyUserId(userVo.userId)">复制</span>
                        </div>
                        <div>{{ userVo.roleNames }}</div>
                    </div>
                    <el-button type="primary" size="small" class="add-sub" @click="addSub">添加备注</el-button>
                </div>

            </div>
            <!-- 处罚记录 -->
            <topTitle title="处罚记录" style="padding-left: 30px" />
            <div style="margin: 0 30px 30px" v-if="userVo && userVo.userId">
                <BlackNameItem ref="balckItem" :userId="userVo.userId" @updateInfo="getUserView"/>
            </div>
            <!-- 备注列表 -->
            <div class="sub-wrap" v-if="userRemarks && userRemarks.length">
                <div class="sub-title">
                    <span>备注</span>
                </div>
                <template>
                    <div class="sub-list" :style="{ 'height': allFlag ? 'auto' : '200px'}">
                        <div class="sub-row" v-for="item in userRemarks" :key="item.remarkId">
                            <div class="top">
                                <div class="name">{{ item.nickName }}</div>
                                <div class="time">{{ item.updateTime }}</div>
                                <i class="el-icon-edit" style="color: #409EFF; margin-right: 10px" @click="addSub(item)"></i>
                                <i class="el-icon-delete" style="color: #F56C6C" @click="delSub(item)"></i>
                            </div>
                            <div class="bottom">{{ item.remark }}</div>
                        </div>
                    </div>
                    <div class="sub-botton" @click="showAll"><i class="el-icon-caret-bottom"></i></div>
                </template>
            </div>
            <!-- 中部用户信息展示 -->
            <topTitle title="基本信息" style="padding-left:30px;"/>
            <div class="user-msg">
                <div class="user-info-box">
                    <div class="user-info-item" v-for="(arr, idx) in properties" :key="idx">
                        <div class="user_box" :style="{ 'flex': (maxCount > arr.properties.length) && ((index + 1) ===  arr.properties.length) ? (maxCount - arr.properties.length + 1) : 1 }" v-for="(item, index) in arr.properties" :key="index">
                            <div class="user_title">{{ item.key }}</div>
                            <div class="user_msg">
                                <span>{{ item.value }}</span>
                                <div class="tip_waring" v-if="item.properties && item.properties.length">
                                    <el-tooltip style="margin-left: 10px" effect="dark" placement="top">
                                        <div slot="content" style="margin-bottom: 4px" v-for="(i, j) in item.properties" :key="j">{{ i.key }} &nbsp; {{ i.value }}</div>
                                        <i class="el-icon-question"></i>
                                    </el-tooltip>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>    
            </div>

            <!-- 底部表格信息 -->
            <topTitle title="账号信息" style="padding-left:30px;"/>
            <!-- <div class="user-tabs">
                <el-tabs :value="userTabValue" type="border-card" @tab-click="handleClick">
                    <el-tab-pane :label="`买号记录「${nums.buyNum || 0}」`" name="first" :lazy="true">
                      <BuyRecord ref="BuyRecord" />
                    </el-tab-pane>
                    <el-tab-pane :label="`浏览记录「${nums.viewNum || 0}」`" :lazy="true">
                      <LookRecord ref="LookRecord" />
                    </el-tab-pane>
                    <el-tab-pane :label="`筛选历史「${nums.selNum || 0}」`" :lazy="true">
                      <ShaiRecord />
                    </el-tab-pane>
                    <el-tab-pane :label="`卖号托管「${nums.manageNum || 0}」`" :lazy="true">
                      <SellTuoguan />
                    </el-tab-pane>
                </el-tabs>
            </div> -->
            <div class="user-tabs">
                <el-tabs :value="userTabValue">
                <el-tab-pane label="绑定信息" :lazy="true" name="first">
                    <bindInfoMsg :detail="userVo" />
                </el-tab-pane>
                <el-tab-pane
                    :label="`托管账号「${
                    (counts && counts.collocation_account) || 0
                    }」`"
                    :lazy="true"
                >
                    <account :detail="userVo" />
                </el-tab-pane>
                <el-tab-pane
                    :label="`租号业务「${(counts && counts.rent_account) || 0}」`"
                    :lazy="true"
                >
                    <rentWork
                    :userId="userVo.userId"
                    :rentAccount="counts.rent_account || 0"
                    />
                </el-tab-pane>
                <el-tab-pane
                    :label="`卖号业务「${(counts && counts.sell_account) || 0}」`"
                    :lazy="true"
                >
                    <sellWork :userId="userVo.userId" :nums="nums" :buyNum="counts && counts.sell_account" />
                </el-tab-pane>
                <el-tab-pane label="启动器" :lazy="true">
                    <!-- <gift /> -->
                    <gameBox :detail="userVo" />
                </el-tab-pane>
                <el-tab-pane
                    :label="`充值记录「${(counts && counts.recharge) || 0}」`"
                    :lazy="true"
                >
                    <payDetail :detail="userVo" />
                </el-tab-pane>
                <el-tab-pane
                    :label="`提现记录「${(counts && counts.withdraw) || 0}」`"
                    :lazy="true"
                >
                    <moneyBox :detail="userVo" />
                </el-tab-pane>
                <el-tab-pane
                    :label="`会话记录「${(counts && counts.chat) || 0}」`"
                    :lazy="true"
                >
                    <userTalk :detail="userVo" />
                </el-tab-pane>
                <el-tab-pane label="其它" :lazy="true">
                    <otherWork :detail="userVo" />
                </el-tab-pane>
                </el-tabs>
            </div>
        </div>

        <!-- 添加备注信息 -->
        <el-dialog :title="subTitle" :visible.sync="subFlag" width="400px">
            <div style="padding: 10px 0 20px;">
                <el-input v-model="subContent" maxlength="200" show-word-limit type="textarea"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="subFlag = false">取 消</el-button>
                <el-button type="primary" @click="subConfirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { formatDate, conversion } from '@/utils/utils'
import LookRecord from './components/lookRecord'
import BuyRecord from './components/buyRecord'
import ShaiRecord from './components/shaiRecord'
import SellTuoguan from './components/sellTuoguan'
import bindInfoMsg from "@/views/user/bindInfoMsg";
import account from "@/views/user/account";
import rentWork from "@/views/user/rentWork";
import sellWork from "@/views/user/sellWork";
import gameBox from "@/views/user/game";
import payDetail from "@/views/user/payDetail";
import moneyBox from "@/views/user/money";
import otherWork from "@/views/user/otherWork";
import userTalk from "@/views/user/userTalk";

export default {
    components: {
      SellTuoguan,
      ShaiRecord,
      BuyRecord,
      LookRecord,
      bindInfoMsg,
      rentWork,
      sellWork,
      otherWork,
      gameBox,
      moneyBox,
      account,
      payDetail,
      userTalk
    },
    data () {
        return {
            remark: '',
            status: 1,
            userId: '',
            userTabValue: 'first',
            showUser: false,
            loading: false,
            detail: {},
            subFlag: false, // 添加备注信息
            subContent: '',
            subTitle: '添加备注',
            subRemarkId: null,
            properties: [],
            userRemarks: [],
            userVo: {},
            allFlag: false,
            maxCount: 0,
            counts: {},
            nums: {}
        }
    },
    created () {
      if (this.$route.query.id) {
          this.userId = this.$route.query.id
          this.getUserView()
      }
      this.getAdviseUserTapCount()
    },

    methods: {
        // 复制用户
        copyUserId(item) {
        const aux = document.createElement('textarea')
        aux.innerHTML = item
        document.body.appendChild(aux)
        aux.select()
        document.execCommand('copy')
        document.body.removeChild(aux)
        this.$message.success('复制成功')
        },
        handleClick(tab) {
          let status = Number(tab.index)
          if (!status) {
            this.$refs.LookRecord.getAdviseCount()
            return
          }
          if (status === 1) {
              this.$refs.BuyRecord.getAdviseCount()
          }
        },
        // 获取数目
        async getAdviseUserTapCount() {
            let res = await this.$http.get(`/user/adviseUserTapCount?userId=${this.userId}`, { 
            })
            if (res.code === '0') {
                this.nums = res.data
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
        },
        // 添加备注
        addSub(content) {
            this.subFlag = true
            this.subContent = ''
            if (content && content.remarkId) {
                this.subRemarkId = content.remarkId
                this.subTitle = '编辑备注'
                this.subContent = content.remark
            }
        },
        // 展开全部
        showAll () {
            this.allFlag = !this.allFlag
        },
        // 确定添加或编辑备注
        subConfirm () {
            let params = {
                beRemarkUserId: this.userId,
                remark: this.subContent,
            }
            let url = `/user/addRemark`
            if (this.subRemarkId) {
                url = `/user/editRemark`
                params.remarkId = this.subRemarkId || 0
            }
            this.$http.post(url, params).then(res => {

                if (res.code === '0') {
                    this.subFlag = false
                    this.getUserView()
                    this.$message({
                        type: 'success',
                        message: this.subRemarkId ? '编辑成功' : '添加成功'
                    })
                    this.subRemarkId = null
                } else {
                    this.$message({
                        type: 'error',
                        message: res.desc
                    })
                }
            })
        },
        // 删除备注
        delSub (item) {
            console.log('删除备注')
            this.$http.post(`/user/delRemark`, {
                remarkId: item.remarkId
            }).then(res => {
                if (res.code === '0') {
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                    this.getUserView()
                } else {
                    this.$message({
                        type: 'error',
                        message: res.desc
                    })
                }
            })
        },

        // 获取用户详情
        async getUserView () {
            if (this.loading) return
            this.loading = true
            let res = await this.$http.get('/user/getUserView', {
                params: {
                    userId: this.userId
                }
            })
            this.loading = false
            if (res.code === '0') {
                this.properties = res.data.properties
                this.userVo = res.data.userVo
                this.userRemarks = res.data.userRemarks
                this.maxCount = res.data.maxCount
                this.counts = res.data.counts
                this.roleArr = (res.data.userVo && res.data.userVo.roleNameDescList) || []
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },

        // 设为视频合作方
        async updateIdentifys (status) {
            if (this.loading) return
            this.loading = true
            let res = await this.$http.get('/user/updateIdentifys', {
                params: {
                    userId: this.detail.userId,
                    status
                }
            })
            if (res.code === '0') {
                this.detail.identify = status
                this.$message({
                    type: 'success',
                    message: '设置成功'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },

        // 数字转换
        conversion (val) {
            return conversion(val)
        },
    },

    filters: {
        timeInit (val) {
            if (val) {
                return formatDate(val, 'YYYY-MM-DD HH:MM:SS')
            } else {
                return '-'
            }
        }
    },

    beforeRouteLeave (to, from, next) {
        delete from.meta.parent
        console.log(from)
        next()
    }
}
</script>

<style lang="scss" scoped>
    .role-wrap {
        padding: 10px;
        display: flex;
    }
    .user-box {
        margin: 0px auto 0;
        padding-bottom: 40px;
        border-radius: 4px;
        border: solid 1px #dfdfdf;
        border-top: none;
        background-color: #ffffff;
        
        .sub-wrap {
            border: solid 1px #ededed;
            border-radius: 5px;
            margin: 0px 30px;
            margin-bottom: 20px;
            overflow: hidden;
            .sub-title {
                padding: 10px;
                font-size: 16px;
                font-weight: 500;
                color: #363636;
                position: relative;
            }
            .sub-botton {
                padding: 5px 0px 10px;
                text-align: center;
                border-top: solid 1px #ededed;
                position: relative;
                background-color: #ffffff;
            }
            .sub-list {
                border-top: solid 1px #ededed;
                padding: 10px;
                height: 200px;
                .sub-row {
                    margin-bottom: 10px;
                    .top {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        margin-bottom: 5px;
                        .name {
                            font-size: 14px;
                            font-weight: 500;
                            color: #363636;
                            margin-right: 10px;
                        }
                        .time {
                            font-size: 12px;
                            font-weight: 500;
                            color: #9ba0b1;
                            margin-right: 10px;
                        }
                        i {
                            cursor: pointer;
                        }
                    }
                    .bottom {
                        font-size: 14px;
                        color: #363636;
                        word-wrap: break-word;
                    }
                }
            }
        }
        .user-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 30px;
            margin-bottom: 20px;
            .user-area {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .user_img {
                    width: 50px;
                    height: 50px;
                    overflow: hidden;
                    border-radius: 50px;
                    background-color: #ccc;
                    margin-right: 20px;
                    img {
                        width: 50px;
                        height: 50px;
                    }
                }
                .user-name {
                    margin-right: 20px;
                    >div {
                        font-size: 12px;
                        font-weight: 600;
                        color: #9ba0b1;
                        margin-bottom: 1px;
                    }
                }
            }
            .user_btn {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                > div {
                    margin-right: 20px;
                }
                // div {
                //     width: 92px;
                //     height: 32px;
                //     border-radius: 4px;
                //     background-color: #0081ff;
                //     display: flex;
                //     justify-content: center;
                //     align-items: center;
                //     font-size: 12px;
                //     font-weight: 500;
                //     color: #ffffff;
                //     cursor: pointer;
                // }
                // .user_btn_center {
                //     margin: 10px 0;
                // }
            }
        }

        .user-msg {
            display: flex;
            align-items: center;
            padding: 20px;
            border-radius: 4px;
            border: solid 1px #ededed;
            background-color: #fdfdfd;
            margin: 0 30px 30px;
            
            .user-info-box {
                flex: 1;
                margin: 0 20px;
                .user-info-item {
                    display: flex;
                    margin-bottom: 10px;
                    .user_box {
                        // padding: 5px;
                        // min-width: 100px;
                        flex: 1;
                    }
                    &:last-child {
                        margin: 0;
                    }
                    .rating {
                        display: flex;
                        align-items: center;
                        i{
                            cursor: pointer;
                            color: #c6c6c6;
                            margin-left: 5px;
                        }
                    }
                    .user_msg {
                        font-size: 14px;
                        font-weight: 500;
                        color: #393939;
                        display: flex;
                        justify-content: flex-start;
                        .tip_waring {
                            cursor:pointer;
                        }
                    }
                    .user_status {
                        font-size: 14px;
                        font-weight: 600;
                        color: #00ba45;
                    }
                    .user_status_bad {
                        font-size: 14px;
                        font-weight: 600;
                        color: red;
                    }
                    .user_title {
                        font-size: 12px;
                        font-weight: 600;
                        color: #9ba0b1;
                        margin-bottom: 6px;
                    }
                }
            }
        }

        .user-tabs {
            margin: 0px 30px;
        }
    }
    .table-btn {
        cursor: pointer;
        color: #409eff;
        font-size: 13px;
        font-weight: 500;
        &:hover {
        text-decoration: underline;
        }
    }
</style>
